<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="Repeater OnMouseover/out" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <AjaxData:Repeater ID="Repeater1" runat="server" 
        ItemDataBoundEvent="onItemDataBound"
        ItemMouseOverEvent="onItemMouseOver"
        ItemMouseOutEvent="onItemMouseOut">
        <HeaderTemplate>
            <h3>Supplier Information</h3>
        </HeaderTemplate>
        <ItemTemplate>
            <h4>
                <span id="spnSupplierName"></span>
            </h4>
            <table border="0" id="t">
                <tr>
                    <td><strong>Contact:</strong> </td>
                    <td colspan="3"><span id="spnContact"></span>&nbsp;(<span id="spnTitle"></span>)</td>
                </tr>
                <tr>
                    <td colspan="4"><span id="spnAddress"></span></td>
                </tr>
                <tr>
                    <td colspan="2"><span id="spnCity"></span>&nbsp;<span id="spnRegion"></span>&nbsp;<span id="spnPostalCode"></span></td>
                </tr>
                <tr>
                    <td colspan="4"><span id="spnCountry"></span></td>
                </tr>
                <tr>
                    <td>
                        <strong>Phone:</strong>
                    </td>
                    <td>
                        <span id="spnPhone"></span>
                    </td>
                    <td>
                        <strong>Fax:</strong>
                    </td>
                    <td>
                        <span id="spnFax"></span>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
        <SeparatorTemplate>
            <hr />
        </SeparatorTemplate>
        <FooterTemplate>
            <span style="font-size:smaller">Total: <span id="spnTotal"></span></span>
        </FooterTemplate>
    </AjaxData:Repeater>

    <script type="text/javascript">

        var _repeater;
        function pageLoad(sender, e)
        {
            DataService.GetAllSupplier(onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _repeater = Repeater1;
            _repeater.set_dataSource(result);
            _repeater.dataBind();
        }

        function onItemDataBound(sender, e)
        {
            var item = e.get_item();

            if (item.get_isDataItemType())
            {
                var supplier = item.get_dataItem();

                var spnSupplierName = item.findControl('spnSupplierName');
                var spnTitle = item.findControl('spnTitle');
                var spnContact = item.findControl('spnContact');
                var spnAddress = item.findControl('spnAddress');
                var spnCity = item.findControl('spnCity');
                var spnRegion = item.findControl('spnRegion');
                var spnPostalCode = item.findControl('spnPostalCode');
                var spnCountry = item.findControl('spnCountry');
                var spnPhone = item.findControl('spnPhone');
                var spnFax = item.findControl('spnFax');

                setText(spnSupplierName, supplier.Company);

                setText(spnTitle, supplier.ContactTitle);
                setText(spnContact, supplier.ContactName);

                setText(spnAddress, supplier.Address);
                setText(spnCity, supplier.City);
                setText(spnRegion, supplier.Region);
                setText(spnPostalCode, supplier.PostalCode);
                setText(spnCountry, supplier.Country);

                setText(spnPhone, supplier.Phone);
                setText(spnFax, supplier.Fax);
            }
            else if (item.get_itemType() == AjaxDataControls.RepeaterItemType.Footer)
            {
                var spnTotal = item.findControl('spnTotal');
                setText(spnTotal, sender.get_dataSource().length);
            }
        }
        
        function onItemMouseOver(sender, e)
        {
            var item = e.get_item();
            if (item.get_isDataItemType())
            {
                var table = item.findControl("t");
                table.style.backgroundColor="red";
            }
        }
        
        function onItemMouseOut(sender, e)
        {   
            var item = e.get_item();
            if (item.get_isDataItemType())
            {
                var table = item.findControl("t");
                table.style.backgroundColor="";
            }
        }
        
        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

    </script>
</asp:Content>